<!DOCTYPE html>
<style>
    body {
        padding: 10;
        width: 800px;
    }
    .float {
        background-color: green;
        width: 150px;
        height: 150px;
    }
    .right { float: right; }
    .left { float: left; }
    .box {
        overflow: hidden;
        background-color: blue;
    }
    .margin-left { margin-left: -400px; }
    .margin-right {margin-right: -400px; }
</style>
<script src="../../../resources/check-layout.js"></script>
<body>
    <p> A box with negative margin should drop it in order to fit next to floats rather than push below the floats. This behaviour is not
       defined by CSS2.1, but the behaviour enforced by this test makes us match IE and FF.</p>
    <div style="overflow:hidden">
        <div class="float right"></div>
        <div class="box margin-left" data-expected-width=650>Header</div>
    </div>
    <div style="overflow:hidden">
        <div class="float right"></div>
        <div class="box margin-right" data-expected-width=650>Header</div>
    </div>
    <div style="overflow:hidden">
        <div class="float left"></div>
        <div class="box margin-left" data-expected-width=650>Header</div>
    </div>
    <div style="overflow:hidden">
        <div class="float left"></div>
        <div class="box margin-right" data-expected-width=650>Header</div>
    </div>

    <div style="overflow:hidden">
        <div class="float right"></div>
        <div class="float left"></div>
        <div class="box margin-left" data-expected-width=500>Header</div>
    </div>
    <div style="overflow:hidden">
        <div class="float right"></div>
        <div class="float left"></div>
        <div class="box margin-right" data-expected-width=500>Header</div>
    </div>
    <script>checkLayout('.box')</script>
</body>

